<template>
	<div class="layout-padding-auto ">
		<el-form :model="state.queryForm" ref="queryRef" :inline="true">
			<el-form-item :label="$t('step.materialCode')" prop="materialCode">
				<el-input v-model="state.queryForm.materialCode" clearable />
			</el-form-item>

			<el-form-item>
				<el-button type="primary" icon="search"  @click="query"> {{ $t('so.query') }}</el-button>
				<el-button icon="refresh"  @click="resetQuery">{{ $t('so.reset')
					}}</el-button>
			</el-form-item>

		</el-form>
		<el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
							:cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
			style="width: 100%; height: 100%" stripe ref="tableRef" show-summary>
			<el-table-column type="index" label="#" width="80" />
			<el-table-column prop="materialCode" :label="$t('step.materialCode')" show-overflow-tooltip />
			<el-table-column prop="materialName" :label="$t('step.materialName')" show-overflow-tooltip />
			<el-table-column prop="materialSpec" :label="$t('step.materialSpec')" show-overflow-tooltip />
			<el-table-column prop="unit" :label="$t('step.unit')" show-overflow-tooltip />
			<el-table-column prop="inTransitQty" :label="$t('step.InTransitQty')" show-overflow-tooltip width="140">
				<template #default="scope">
					<el-tag type="primary" effect="dark">
						{{ scope.row.inTransitQty }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="lvtStepoutInitQty" :label="$t('step.stepoutInitQty')" show-overflow-tooltip
				width="140">
				<template #default="scope">
					<el-tag type="primary" effect="light">
						{{ scope.row.lvtStepoutInitQty }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="lvtLossQty" :label="$t('step.lossQty')" show-overflow-tooltip width="140">
				<template #default="scope">
					<el-tag type="danger" effect="dark">
						{{ scope.row.lvtLossQty }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="lvtStepinQty" :label="$t('step.stepinQty')" show-overflow-tooltip width="140">
				<template #default="scope">
					<el-tag type="warning" effect="dark">
						{{ scope.row.lvtStepinQty }}
					</el-tag>
				</template>
			</el-table-column>
		</el-table>

		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
	</div>

</template>
<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { ref, reactive } from 'vue';
import { TabsPaneContext, ElMessage } from 'element-plus';
import { GetStepMaterialRecords } from '/@/api/platform/report/step';
import { useI18n } from 'vue-i18n';
import { useMessage, useMessageBox } from '/@/hooks/message';
const { t } = useI18n();

// 搜索变量
const queryRef = ref();
//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {

	},
	pageList: GetStepMaterialRecords,
});
//搜索
const query = () => {
	getDataList();
};
// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	getDataList(false);
};
const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle, downBlobFile } = useTable(state);

</script>